<template>
  <Layout>
    <div style="width: 100%">
      <div>
        <n-grid :cols="10">
          <n-gi :span="9">
            <span class="cn">{{ data.company_name }}</span>
            <span class="time">
              <n-time format="yyyy/MM" :time="start_time" type="datetime" />
              -
              <n-time format="yyyy/MM" :time="end_time" type="datetime" />
            </span>
          </n-gi>
          <n-gi :span="1" v-if="canEdit">
            <n-button type="primary" @click="handle">编辑</n-button>
          </n-gi>
        </n-grid>
      </div>
      <div>
        <span>{{ data.job_name }}</span>
        |
        <span>{{ industry_name }}</span>
      </div>
      <div class="pfm">
        <span>{{ data.performance }}</span>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '../itemLayout.vue'
import { getIndustriesName } from '@/data'
let props = defineProps({
  data: null,
  canEdit: {
    type: Boolean,
    default: true
  }
})


let industry_name = computed(()=> {
  return getIndustriesName(props.data.industry_code)
})

const $emit = defineEmits(['edit'])
function handle() {
  $emit('edit',props.data.id)
}
let start_time = computed(() => {
  return new Date(props.data.start_time)
})

let end_time = computed(() => {
  return new Date(props.data.end_time)
})
</script>

<style scoped>
.cn {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin-right: 10px;
}
.pfm {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  font-size: 14px;
  /* background: #f5f5f5; */
}
.time {
  font-size: 13px;
}
span {
  color: #333639;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
